<template>
  <div class="container">
    <circle-header :leftType="'TOPICD'" style="position: relative;box-shadow: 8px 8px 10px #ccc;margin-bottom: 20px">
<!--      <a slot="right-y" class="more-icon-y" @click="sendMsg">{{$t('btn_publish')}}</a>-->
    </circle-header>
    <!--分类选择-->
    <div class="title-container-catalog">
      <p>{{$t('circle285')}}</p>
    </div>
    <div class="select-container">
      <span style="color: #ccc"> {{selectedClassify.name || $t('circle302')}}</span>
      <div @click="selectClassify">
        <span class="iconfont icon-more-copy"></span>
      </div>
    </div>

    <div class="title-container">
       <p>{{$t('circle283')}}</p>
    </div>
    <Comment ref="comment" v-model="comment" :initShow="true"  @changeUserList="selectUser" :placeholder="$t('circle284')">
    </Comment>
    <van-action-sheet
            v-model="classifySwitch"
            :actions="list"
            :cancel-text="$t('cancel')"
            close-on-click-action
            @cancel="onCancel"
            @select="onSelect"
            :description="list.length===0?$t('mall_28'):''"
    />
    <div style="padding-top: 40px;text-align: center">
      <van-button type="info" @click="sendMsg" style="width: 200px">{{$t('btn_publish')}}</van-button>
    </div>
  </div>
</template>

<script>
import Comment from '../../../repeatComponents/comment/Comment';
import CircleHeader from '@/repeatComponents/circleHeader/CircleHeader';
import {ActionSheet, Dialog, Button} from 'vant';
export default {
    name: 'TopicPublish',
    components: {
        CircleHeader,
        Comment,
        [ActionSheet.name]: ActionSheet,
        [Button.name]: Button
    },
    data() {
        return {
            circleId: this.$route.query.circleId,
            comment: '',
            classifySwitch: false,
            list: [],
            selectedClassify: {},
            atUsers: [],
            optioning: true
        };
    },
    mounted() {
        this.getClassify();
    },
    methods: {
        sendMsging() {
            if (this.optioning) {
                this.optioning = false;
                this.$refs.comment.changeUserList();
                this.$axios({
                    method: 'POST',
                    url: '/app/api/trainee/topic',
                    data: {
                        atUsers: this.atUsers,
                        tcontent: this.comment,
                        topicTags: [this.selectedClassify],
                        twcId: this.circleId
                    }
                }).then(res => {
                    this.$router.go(-1);
                }).catch(err => {
                    this.optioning = true;
                    Dialog.alert({
                        width: '180px',
                        confirmButtonText: this.$t('mall_10'),
                        confirmButtonColor: '#00aeef',
                        message: err.response.data.errorMsg || err.response.data.errMsg
                    });
                });
            }
        },
        sendMsg() {
            if (!this.selectedClassify.name) {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: this.$t('circle295')
                });
                return false;
            } else if (!this.comment) {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: this.$t('message_please_content')
                });
                return false;
            } else {
                this.sendMsging();
            }
        },
        selectClassify() {
            this.classifySwitch = true;
        },
        //获取分类信息
        getClassify() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/topic-tag/${this.circleId}`
            }).then(res => {
                if (res.data) {
                    this.list = JSON.parse(JSON.stringify(res.data).replace(/ttName/g, 'name'));
                }
            });
        },
        onSelect(item) {
            this.selectedClassify = item;
        },
        onCancel() {
            this.classifySwitch = false;
        },
        selectUser(val) {
            this.atUsers = val;
        }
    }
};
</script>

<style scoped lang="less">
  /deep/.comment-container .area{
    height: 150px;
  }
  /deep/.comment-container{
    padding: 20px 16px 5px 16px;
    position: relative;
  }
 .container{
   .more-icon-y{
     font-size: 14px;
     padding: 18px 20px 0 0;
     color: #666 !important;
   }
   height: 100%;
   display: flex;
   flex-direction: column;
   .select-container{
     height: 8%;
     background-color: #fff;
     margin-top: 5px;
     display: flex;
     padding: 10px 16px;
     justify-content: space-between;
     >span{
       color: #333;
       line-height: 54px;
       height: 54px;
     }
     >div{
       >span{
         line-height: 52px;
         height: 52px;
       }
     }
   }
   .title-container{
     width: 100%;
     height: 7%;
     margin-bottom: 5%;
     >p{
       padding: 8% 0 2% 16px;
       font-size: 14px;
       color: #666;
     }
   }
   .title-container-catalog{
     width: 100%;
     height: 4%;
     >p{
       padding-left:  16px;
       font-size: 14px;
       color: #666;
     }
   }
 }
</style>
